<html>
    <head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://localhost:9000/public/js/lib/d3.min.js" ></script>
        <title>综合评分</title>
        <style>
            .svg{
                box-shadow:0 0 10px rgba(0,0,0,.1);
                display:inline-block;
                margin:20px;
            }
            .pathOut{
                stroke:#555;
                fill:#fff;
            }
            .pathIn{
                stroke:#555;
                fill:#eee;
            }
            .score{
                -webkit-transition:all .2s ease-in-out 0s;
                transition:all .2s ease-in-out 0s;
                stroke : #333 ;
                fill:rgba(90,90,90,.3) ;
                box-shadow:0 0 10px rgba(0,0,0,.2);
            }
            .score:hover{
                fill:rgba(0,0,0,.8);
                stroke:rgb(200,200,200) ;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" >
            //@note 综合评分图
            (function(win){
                var width = 500 ;
                var height = 500 ;
                var svg = d3.select('body').append('svg').attr({
                    'class' : 'svg' ,
                    'width' : width ,
                    'height' : height
                }) ;
                var center = [ width / 2 , height / 2  ] ;
                var getStarPoint = function( ar , width , height ){
                    width = width || 500 ;
                    height = height || 500 ;
                    var points = d3.range(ar.length).map(function(d,i){
                        var angle =  Math.PI * 2 / ar.length * i ;
                        return [ center[0] + ar[i] * Math.sin(angle) , center[1] - ar[i] * Math.cos(angle) ] ;
                    }) ;
                    points.push(points[0]) ;
                    return points ;
                } ;

                var line = d3.svg.line().x(function(d){
                    return d[0] ;
                }).y(function(d){
                    return d[1] ;
                }) ;

                var r = width * 5 / 12 ;
                var maxScore = 5 ;
                var data = d3.range(6).map(function(d,i){
                    return d3.range(5).map(function(d){ return i/maxScore*r ; }) ;
                }) ;

                for( var i = data.length-1 ; i >= 0 ; i-- ){
                    svg.append('path').attr({
                        'class' : i%2 === 0 ? 'pathIn' : 'pathOut' ,
                        'd' : line( getStarPoint(data[i]) )
                    }) ;
                }

                var score = [ 2 , 4 , 4 , 1 , 3 ].map(function(d){
                    return d/maxScore*r ;
                }) ;

                var names = [ '逗逼' , 'high度' , '一分钟3800下' , '阔以哦' , '6666' ] ;

                var path = svg.append('path').attr({
                    'class' : 'score' ,
                    'd' : line( getStarPoint( score ) )
                }) ;

                svg.selectAll('text').data(names).enter().append('text').attr({
                    x : function(d,i){
                        var angle =  Math.PI * 2 / names.length * i ;
                        return  center[0] + ( r + 10 ) * Math.sin(angle);
                    } ,
                    y : function(d,i){
                        var angle =  Math.PI * 2 / names.length * i ;
                        return center[1] - ( r + 10 ) * Math.cos(angle) ;
                    } ,
                    dx : '-10px' ,
                    class : 'text'
                }).text(function(d){ return d }) ;

                window.setInterval(function(){

                    var newScore = d3.range(5).map(function(d){
                        return parseInt(Math.random() * maxScore) / maxScore * r ;
                    }) ;

                    path.transition().attr({
                        d : line( getStarPoint( newScore ) )
                    }) ;

                } , 1000) ;

            }(window)) ;
        </script>
        <style>
            .area{
                fill:#eee;
                stroke:#eee;
                -webkit-transition:fill .2s ease-in-out 0s;
                transition:fill .2s ease-in-out 0s;
            }
            .area:hover{

            }
            .axis .domain{
                fill: none;
                stroke: #000;
            }
            .line{
                stroke:#000;
                fill:none;
            }
            .text{
                fill:#000;
            }
            .circle{
                stroke:#000;
                fill:#fff;
            }
            .measure{
                stroke-width:1px;
                stroke:#000;
            }
        </style>
        <script type="text/javascript" >
            //@note area
            (function(win){

                var width = 500 ;
                var height = 500 ;
                var margin = 30 ;
                var maxCount = 10 ;
                var svg = d3.select('body').append('svg').attr({
                    'class' : 'svg' ,
                    width : 500 ,
                    height : 500
                }) ;
                var x = d3.scale.linear().domain([ 0 , maxCount - 1 ]).range([ margin, width - margin ]) ;
                var y = d3.scale.linear().domain([ 0 , maxCount - 1 ]).range([ height - margin , margin ]) ;

                var data = d3.range(maxCount).map(function(){
                    return parseInt(Math.random()*10) ;
                }) ;

                //@note 添加区域图
                var area = d3.svg.area()
                    .x(function(d,i){ return x(i) ; })
                    .y(function(d){ return y(d) ; })
                    .y1(y(0)) ;

                svg.append('path').attr({
                    'class' : 'area' ,
                    'd' : area(data)
                }) ;

                //@note 添加折线
                var line = d3.svg.line()
                    .x(function(d,i){ return x(i) ; })
                    .y(function(d){ return y(d) ; });

                svg.append('path').attr({
                    'class' : 'line' ,
                    'd' : line(data)
                }) ;

                //@note 添加文字
                svg.selectAll('text').data(data).enter().append('text').attr({
                    class : 'text' ,
                    x : function(d,i){ return x(i) ; } ,
                    y : function(d){ return y(d) ; } ,
                    dy : '-5px'
                }).text(function(d){
                    return d ;
                }) ;

                //@note 添加坐标系
                var xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(10) ;
                var yAxis = d3.svg.axis().scale(y).orient('left') ;

                svg.append('g').attr({
                    "class" : "axis" ,
                    "transform" : "translate(0," + ( height - margin ) + ")"
                }).call(xAxis) ;

                svg.append('g').attr({
                    "class" : "axis" ,
                    "transform" : "translate(" + margin + ",0)"
                }).call(yAxis) ;

                svg.selectAll('circle').data(data).enter().append('circle').attr({
                    class : 'circle' ,
                    r : 5 ,
                    cx : function(d,i){ return x(i) ; } ,
                    cy : function(d){ return y(d) ; }
                }) ;

                var measureLine = d3.svg.line()
                    .x(function(d){ return d; })
                    .y(function(d,i){
                        if( i === 0 ){
                            return 0 ;
                        } else {
                            return height ;
                        }
                        return d;
                    }) ;
                var measure = svg.append('path').attr({
                    class : 'measure' ,
                    d : measureLine([0,0])
                }) ;

                var selCircle = function(x){

                    svg.selectAll('circle.circle').each(function(){
                        var self = d3.select(this) ;
                        var point = parseInt(self.attr('cx')) ;
                        var r = parseInt(self.attr('r')) ;
                        if( Math.abs(x-point) < r ){
                            self.style('fill','#000') ;
                        } else {
                            self.style('fill','#fff') ;
                        }
                    }) ;

                } ;

                svg.on('mousemove',function(e){
                    var point = d3.mouse(this) ;
                    measure.attr({
                        d : measureLine([point[0],point[0]])
                    }) ;
                    selCircle(point[0]) ;
                }) ;

            }(window))
        </script>
    </body>
</html>